import { ref } from 'vue';
import { useRouter } from 'vue-router';
import { Toast } from 'vant';
import { useService } from '@/utils/services';
import { TAG_BG } from '@/constants/static';

export const useTagBackground = () => {
  const backgroundColors = ['#F0F5FF', '#FFF9F9', '#FFF8F0', '#EFFEFD', '#F4F1FF'];
  const tagStyle = (index) => ({
    'background-color': backgroundColors[index % backgroundColors.length],
    'background-image': `url(${TAG_BG[index % backgroundColors.length]})`
  });
  return { tagStyle };
};

const classifyList = ref([]);

export const useClassify = () => {
  const router = useRouter();
  const actions = useService();
  const isLoad = ref(false);

  function getClassify(params) {
    const opts = params;
    const toast = Toast.loading({
      loadingType: 'spinner',
      forbidClick: true,
      duration: 0
    });
    return actions.hos
      .getClassify(opts)
      .then((data) => {
        classifyList.value = data;
        return data;
      })
      .finally(() => {
        setTimeout(() => {
          isLoad.value = true;
          toast.clear();
        });
      });
  }

  function onTagClick(item, departmentId) {
    /**
     *  1. 判断 isChild 是否为true
     *     true  跳转到子分类
     *     false 进入文章页面
     */
    if (item.haveNext) {
      router.push(
        `/classify/${item.articleCategoryId}?departmentId=${departmentId}&title=${item.articleCategoryName}`
      );
    } else {
      router.push(
        `/article?categoryId=${item.articleCategoryId}&departmentId=${departmentId}&title=${item.articleCategoryName}`
      );
    }
  }

  return { classifyList, onTagClick, getClassify, isLoad };
};
